<!--  -->
<template>
  <!-- <video class="prism-player" id="enlargingVideo" ref="playerCon" autoplay controls></video> -->
  <div class="size-full">
    <video id="video" ref="Video" controls autoplay class="size-full bg-white"></video>
  </div>
</template>

<script setup lang="ts">
import Hls from 'hls.js'
import { onBeforeUnmount, onMounted, ref } from 'vue'

const prop = defineProps<{ url: string }>()
const Video = ref<HTMLMediaElement>()
let hlsObj: Hls
onMounted(() => {
  const videoSrc = prop.url
  const hls = new Hls()
  hlsObj = hls
  hls.loadSource(videoSrc)
  hls.attachMedia(Video.value!)
  hls.on(Hls.Events.MANIFEST_PARSED, () => {
    Video.value!.play()
  })
})
onBeforeUnmount(() => {
  hlsObj.stopLoad()
  hlsObj.destroy()
})
</script>
<style scoped lang="less">
/* @import url(); 引入css类 */
</style>
